{{extend "tasks_layout.html"}}

{{block sub_menu}}
{{sub_menu(menu_items, 'tasks', 'develop')}}
{{end}}

{{block content_tool}}
<style>
span.selection a.active {background-color: #ccc;}
</style>
    <a href="/tasks/develop/{{=task_id}}#functions">返回任务</a>
    <a class="btn btn-blue" href="/systems/{{=sys_id}}/functions/add" target="_blank">新増功能点</a>
    </span>
{{end}}

{{block content_main}}

{{use "jquery"}}
{{use "facebox"}}
{{use "jqutils", ajaxForm=True}}
{{use "poshytip"}}

<style>
table.plan-table {border: 0;width:100%;table-layout:fixed;}
table.plan-table th {border-bottom:1px solid #D9E7FF;border-top:1px solid #D9E7FF;margin-top:15px;padding: 2px 8px;}
table.plan-table tr {height: 30px;}
table.plan-table td {padding: 2px 8px;}
table.plan-table tr:hover{background-color: #f0f0f0;}
table.plan-table tr.child {border-bottom:1px solid #D9E7FF;border-left:1px solid #D9E7FF;border-right:1px solid #D9E7FF;}
table.plan-table tr.child div{margin: 4px 0;padding: 2px;}
table.plan-table tr.child div b{color:#00f;}
table.plan-table tr div.delay {background-color:red;color:white;}
#functions-wrap {border: 1px solid #D9E7FF;height:400px; overflow-y:auto;}
#functions {table-layout:fixed;}
#functions tbody tr {color:#ccc;}
#functions tbody tr a{color:#ccc;}
#functions tbody tr.selected {color:#000;}
#functions tbody tr.selected a{color:#000;}
#functions-head th {text-align:left;}
#functions td {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
</style>
<div class="content">
<div class="query">
    {{include "inc_query.html"}}
</div>
    <table class="plan-table width100" id="functions-head">
        <thead>
            <tr>
                <th width="50px">选择</th>
                <th width="50px">操作</th>
                <th width="80px">分类</th>
                <th width="200px">系统功能点</th>
                <th width="50px">变动状态</th>
                <th width="60px">开放使用状态</th>
                <th width="60px">开放验密需求</th>
                <th width="*">功能测试要点</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div id="functions-wrap">
    <table class="plan-table width100" id="functions">
        <tbody>
        </tbody>
    </table>
    </div>
</div>
<script type="text/html" id="rowTemplate">
    <tr class="${selected}">
        <td width="50px"><input type="checkbox" ${checked} function_id="${function_id}" value="${id}" class="function"></input></td>
        <td width="50px">${action_link}</td>
        <td width="80px">${category}</td>
        <td width="200px">${function}</td>
        <td width="50px">${change_status}</td>
        <td width="60px">${open_status}</td>
        <td width="60px">${open_secverify}</td>
        <td width="*">${test_point}</td>
    </tr>
</script>
<script>
    var flag = '{{=flag}}';
    function get_records(url){
        $.ajax({
            type: "GET",
            url: url,
            success: function(data){
                var target = $('#functions').find('tbody');
                target.empty();
                $.each(data.rows, function(index, value){
                    if (value.checked){
                        value.selected = 'selected';
                    }
                    var post = template($('#rowTemplate').html(), value).appendTo(target);
                });
            }
        });
    }
    function assign(el, function_id, action, callback){
        $.ajax({
            type: "POST",
            data: {function_id:function_id, action:action},
            url: "/tfunctions/{{=task_id}}/set",
            success: function(r){
                if (r.success){
                    if (callback) callback(r.data);
                    if (action == 'assign'){
                        el.prop('checked', true);
                        //add popup process
                    }
                    else
                        el.prop('checked', false);
                }else{
                    show_message(r.message);
                }
            }
        });
    }
    function edit_function(url, options){
        $.facebox(function() {
            $.get(url, function(data) {
                if (!$.browser.msie) $.facebox(data);
                else $.facebox(data, '', {'width':300});
                // bind form using 'ajaxForm' 
                $('#function_form').ajaxForm(options); 
            });
        });
    }
    $('#functions tbody').delegate('input.function', 'click', function(e){
        e.preventDefault();
        var c = $(this).is(':checked');
        var el = $(this);
        if (flag == 'all'){
            if (c){
                assign(el, el.attr('function_id'), 'assign', function(data){
                    var target = $(el.parents('tr')[0]);
                    var element = template($('#rowTemplate').html(), data);
                    target.replaceWith(element);
                    element.addClass('selected');
                });
            }else{
                assign(el, el.attr('function_id'), 'unassign', function(data){
                    var target = $(el.parents('tr')[0]);
                    target.removeClass('selected');
                });
            }
        }else if (flag == 'assigned'){
            if (!c){
                assign(el, el.attr('function_id'), 'unassign', function(data){
                    var target = $(el.parents('tr')[0]);
                    target.remove();
                });
            }
        }else{
            if (c){
                assign(el, el.attr('function_id'), 'assign', function(data){
                    var target = $(el.parents('tr')[0]);
                    target.remove();
                });
            }
        }
    });
    
    function set_active(el){
        $('span.selection a').removeClass('active');
        $(el).addClass('active');
    }
    $(function(){
        /*$('#functions_all').click(function(){
            flag = 'all';
            get_records();
            set_active(this);
        });
        $('#functions_assigned').click(function(){
            flag = 'assigned';
            get_records();
            set_active(this);
        });
        $('#functions_unassigned').click(function(){
            flag = 'unassigned';
            get_records();
            set_active(this);
        });
        get_records();
        set_active('#functions_assigned');*/
        var query_string = $.query_string.set('data', '', true).toString();
        var url = "/tfunctions/{{=task_id}}/list"+query_string;
        get_records(url);
    });
    function update_function(data){
        var target = $($('input[type=checkbox][value='+data.id+']').parents('tr')[0]);
        var element = template($('#rowTemplate').html(), data);
        target.replaceWith(element);
        element.addClass('selected');
        jQuery(document).trigger('close.facebox');
    }
    $(function(){
        //设置facebox图片设置
        $.facebox.settings.loadingImage = '{{=url_for_static('facebox/loading.gif')}}'
        $.facebox.settings.closeImage = '{{=url_for_static('facebox/closelabel.png')}}'

        //设置poshytip关闭图片
        $.fn.poshytip.defaults.closeImage = '{{=url_for_static("jqutils/cross_grey_small.png")}}';
        
        //生成ajaxForm的处理函数 create_result_process defined in jqutils.js
        var result_process = create_result_process('#function_form', 
            {success:update_function});
        
        //设置ajaxForm的参数
        var options = { 
            success: result_process,  // post-submit callback 
            resetForm: true,        // reset the form after successful submit 
            dataType: 'json'
        }; 
        
        //关联facebox，对”编辑“按钮进行click事件绑定
        $('#functions').delegate('a.edit_function', 'click', function(e){
            e.preventDefault();
            edit_function($(this).attr('href'), options);
        });
        
        //在发出ajax请求时清除存在的消息信息
        $(document).ajaxStart(function(){
            show_simple_message('');
        });
        
        //设置关闭facebox时，清除消息，同时清除所有的tips
        $(document).bind('afterClose.facebox', function(){
            show_simple_message('');
            $('#add_category input').poshytip('destroy');
        });
    });
</script>
{{end}}
